<template>
	<div id="player">
		<video-player
			ref="videoPlayer"
			class="video-player vjs-big-play-centered"
			:playsinline="false"
            :options="playerOptions"
			@ready="onPlayerReady"
			@play="onPlayerPlay($event)"
			@pause="onPlayerPause($event)"
			@ended="onPlayerEnd($event)"
		/>
	</div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
   export default{
       props: ['videoUrl'],    
       data() {
            return {
                playerOptions: {
                    autoplay: false,
                    width: '400px',
                    height: 'auto',
                    sources: [{
                        src: this.videoUrl,
                        type: 'video/mp4'
                    }],
                    preload: 'auto',
                    controls: true
                }
            };
       },
       components:{
           videoPlayer
       },
       methods:{
           onPlayerReady(v) {
               console.log(1)
               console.log(v)
           },
           // 播放了
           onPlayerPlay(v) {
               console.log(2)
               console.log(v)
           },
           // 暂停了
           onPlayerPause(v) {
               console.log(3)
               console.log(v)
           },
           // 播放结束了
           onPlayerEnd(v) {
               console.log(4)
               console.log(v)
           }
       },
       destroyed () {
            console.log('destroyeddestroyeddestroyed')
            window.removeEventListener('popstate',this.gotoMobile,false);//false阻止默认事件
       },
   }
</script>
<style scoped>
.pageview{
      height:100%;
      padding-top: 50px;
      font-size: 12px;
  }
  .themimg{
      background-size:contain;
      background-repeat:no-repeat;
      background-size:100% 100%;
  }
  .footer2{
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  margin-left: 37px;
  padding-right: 74px;
}
</style>